<template>
  <div class="demo-main">
    <div class="demo-login">
      <h1 style="padding-bottom: 20px">图书管理系统后台</h1>
      <Login @on-submit="handleSubmit">
        <UserName name="username" />
        <Password name="password" />
        <Submit />
      </Login>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/api';
export default {
  methods: {
    handleSubmit(valid, { username, password }) {
      if (valid) {
        login({ username: username, password: password }).then((res) => {
          this.$Message.info(res.msg);
          if (res.token === 1) {
            localStorage.setItem('user', username);
            setTimeout(() => {
              this.$router.push({
                name: 'Main'
              });
            }, 1000);
          }
        });
      }
    }
  }
};
</script>
<style>
.demo-main {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/1.png');
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
}
.demo-login {
  text-align: center;
  width: 400px;
  height: 300px;
  margin: 0 auto;
  margin-top: 15%;
}
</style>
